<template>
  <el-container class="max_container">
    <el-row>
      <el-col :span="24">
        <div style="padding-left: 10px">
          <h1>{{'「'+username+'」'}}</h1>
          <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item v-for="(a,index) in pathName" :key="index">
              <span @click="testclick2(index)" style="color:#09AAff">{{a}}</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span>{{currentPath.name}}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
      <el-col>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="文件名">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1">
                <i class="el-icon-folder"></i>
                <span style="margin-left: 10px" @click="testclick(scope.row)">{{ scope.row.name }}</span>
              </span>
              <span v-else>
                <i :class="myclass[scope.row.status]"></i>
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小"></el-table-column>
          <el-table-column prop="time" label="日期">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ dateChange(scope.row.time)}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  ....
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="scope.row.status!=1">
                    <a :href="scope.row.uri+'?parameter=1'">下载</a>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="saveClick(scope.row)">保存到网盘</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog :title="'选取文件夹'" :visible.sync="dialogVisible" modal-append-to-body="false">
      <Select :pId.sync="pId"></Select>
      <el-button type="txt" @click="onSubmitSave()">确认保存</el-button>
    </el-dialog>
  </el-container>
</template>

<script>
import Select from "./Select";
export default {
  data() {
    return {
      pId: "1",
      drawer: false,
      username: "",
      tableData: [],
      pathName: [],
      pathId: [],
      currentPath: {},
      myclass: [
        "el-icon-folder",
        "el-icon-folder",
        "el-icon-picture-outline",
        "el-icon-video-play",
        "el-icon-document",
        "el-icon-headset",
        "el-icon-cloudy"
      ],
      file:'',
      dialogVisible: false
    };
  },
  methods: {
    async testclick(file) {
      if (file.status == 1) {
        this.pathName.push(this.currentPath.name);
        this.pathId.push(this.currentPath.index);
        this.currentPath.index = file.id;
        this.currentPath.name = file.name;
        const { data: res } = await this.$http.get(
          "/api_file/file/bypIdNuId?pId=" + this.currentPath.index
        );
        this.tableData = res;
      }
    },

    async testclick2(index) {
      this.currentPath.index = this.pathId[index];
      for (let i = this.pathId.length - 1; i >= index; i--) {
        this.pathId.pop();
      }
      this.currentPath.name = this.pathName[index];
      for (let i = this.pathName.length - 1; i >= index; i--) {
        this.pathName.pop();
      }
      const { data: res } = await this.$http.get(
        "/api_file/file/bypIdNuId?pId=" + this.currentPath.index
      );
      this.tableData = res;
    },
    dateChange(javaDate) {
      if (javaDate) {
        return javaDate.substr(0, 10).replace(/-/g, "/");
      } else {
        return "";
      }
    },
    message(message, flag) {
      if (flag) {
        this.$message.success(message);
      } else {
        this.$message.error(message);
      }
    },
    saveClick(file) {
      this.file = file;
      this.dialogVisible = true;
      
    },
    message(message, flag) {
      if (flag) {
        this.$message.success(message);
      } else {
        this.$message.error(message);
      }
    },
    onSubmitSave(){
        this.$http.get("/api_file/file/saveshare?sId="+this.file.id+"&pId="+this.pId).then(res=>{
            if(res.status == 200){
                this.dialogVisible = false
                this.message("文件保存成功",true)
            }else{
                this.dialogVisible = false
                this.message("文件保存失败",false)
            }
        })
    }
    
},
  async created() {
    let query = window.sessionStorage.getItem("key");
    if (query != null) {
      const { data: res } = await this.$http.get(
        "/api_file/file/getByIdNuId?id=" + query
      );
      this.currentPath.index = res.id;
      this.currentPath.name = res.name;
      const { data: user } = await this.$http.get(
        "/api_user/cloud_user/get_by_id?id=" + res.uid
      );
      this.username = user.name;
      const { data: file } = await this.$http.get(
        "/api_file/file/bypIdNuId?pId=" + this.currentPath.index
      );
      this.tableData = file;
    }
  },
  components: {
    Select
  }
};
</script>

<style lang="less" scoped>
.max_container {
  height: 50%;
  border: 0;
}
.el-breadcrumb {
  font-size: 20px;
  line-height: 2;
  margin-left: 20px;
}
</style>